<template>
  <div id="operate">  

    <el-form ref="form"  label-width="0px">  
     <el-row> 
             <el-col :span="24" style="text-align: right;">   
                <el-button type="primary" class="custom_color_button" style="margin-bottom:10px;" @click="add_but()">添加</el-button>         
             </el-col>  
    </el-row>
   </el-form>
   <!-- 渲染数据list -->
   <jurisdictionall-list :datalist="datalist" @up_list_fun="list_fun"> </jurisdictionall-list>

      
   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>

       <!-- 添加 -->
        <el-dialog title="添加" :visible.sync="mtk"  width="600px">
            <div style="width:100%;"> 

            <el-form ref="form"   label-width="0px" style="width:100%;">
                 <el-form-item label="" label-width="0px" >
                    <el-input v-model="mtk_form.account" placeholder="请输入帐号"></el-input>
                </el-form-item> 
                 <el-form-item label="" label-width="0px" >
                    <el-input v-model="mtk_form.telphone" placeholder="请输入手机号"></el-input>
                </el-form-item> 
                 <el-form-item label="" label-width="0px" >
                    <el-input v-model="mtk_form.password" placeholder="请输入密码"></el-input>
                </el-form-item> 
                 <el-form-item label="" label-width="0px" >
                    <el-input v-model="mtk_form.safe_password" placeholder="请输入二级密码"></el-input>
                </el-form-item>  
                 <el-form-item label="" label-width="0px" >
                    <el-input v-model="mtk_form.username" placeholder="名称"></el-input>
                </el-form-item>
                 <el-form-item label-width="0px" >
                    <el-select  v-model="mtk_form.select_num" placeholder="请选择用户类别"  style="width:100%;">
                        <el-option  v-for="(item,index) in select_data" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                   </el-form-item> 
                  <div style="display:flex;"> 
                    <div>选择权限 </div>
                    <div style="flex:1;margin-left:10px;">
                       <el-tree
                        :data="treedata"
                        show-checkbox     
                        :props="defaultProps"
                        highlight-current
                       :default-checked-keys="select_arr"
                        node-key="cid"
                        ref="tree"
                        @check="check">
                        </el-tree>
                       </div>
                  </div>
            </el-form>
               <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                  <el-button type="primary" class="custom_color_button" style="width:100%;" @click="qr_but">确认</el-button>
                 </div>
            </div> 
        </el-dialog>

    

      
  </div>
</template>

<script>
import JurisdictionallList from '@/view/Jurisdictionall/JurisdictionallList'
export default {
  name: 'operate',
  data () {
    return {
        datalist:[],
        page:1,
        count:0,
        mtk:false,
        mtk_form:{
          account:'',
          telphone:'',
          password:'',
          safe_password:'',
          username:'',
          select_num:'super',
        },
        select_data:[{"name":"超级管理员","id":'super'},{"name":"运营","id":'operate'},{"name":"客服","id":'service'},{"name":"财务","id":'finance'}],
        treedata:[],
        defaultProps: {
          children: 'list',
          label: 'cname'
        },
        select_arr:[],  //默认选中
        select_arra:[], //选中的值
        select_arrc:'', //选中的值转字符串
    }
  },
 components:{
    JurisdictionallList
  },
  created(){ 
     //this.select_arra = this.select_arr
    this.list_fun()
  },
  mounted (){

  },
  methods: {
      list_fun(){
         this.post("/manager/listOfData", {
              page:this.page,
	        }).then(res => {
            this.count = res.result.count
            this.datalist = res.result.list
            console.log(res,"权限用户列表")
         })
      },
      nav_fun(){
          this.post("/cate/listOfData", {
	        }).then(res => {
            this.treedata = res.result
            console.log(res,"所有列表")
         })
      },
      add_but(){
        this.mtk_form.account = ''
        this.mtk_form.telphone = ''
        this.mtk_form.password = ''
        this.mtk_form.safe_password = ''
        this.mtk_form.username = ''
        this.mtk_form.select_num = 'super'
        this.select_arra = []
        this.nav_fun()  
        this.mtk = true    
      },
      check(a,b,c,d){       
          this.select_arra = b.checkedKeys.concat(b.halfCheckedKeys)
          // console.log(b.checkedKeys)
          // console.log(b.halfCheckedKeys)
           console.log(this.select_arra)
      },
      qr_but(){
         if(this.select_arra.length == 0){
            this.open1('请选择权限','warning')
            return false
         }else if(!this.mtk_form.account){
             this.open1('请输入账号','warning')
            return false
         }else if(!this.mtk_form.telphone){
             this.open1('请输入手机号','warning')
            return false
         }else if(!this.mtk_form.password){
             this.open1('请输入密码','warning')
            return false
         }else if(!this.mtk_form.safe_password){
             this.open1('请输入二级密码','warning')
            return false
         }else if(!this.mtk_form.username){
             this.open1('请输入名称','warning')
            return false
         }else{
          
             this.select_arrc = this.select_arra.toString()

               this.post("/manager/create", {
                account:this.mtk_form.account,
                telphone:this.mtk_form.telphone,
                password:this.mtk_form.password,
                safe_password:this.mtk_form.safe_password,
                username:this.mtk_form.username,
                identity:this.mtk_form.select_num,
                power:this.select_arrc
               }).then(res => {
                  if(res.error_code == 0){
                      this.open1(res.result,'success')  //提示框
                      this.mtk = false
                      this.list_fun()
                  }else {
                     this.open1(res.message,'warning')
                  }

                })

         }
          
        


          console.log(this.select_arrc)   
      },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      }
  }
}
</script>


<style scoped>

</style>
